<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>充值页面</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!-- 引入jQuery库（可选） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .container {
            margin-top: 50px;
            padding: 20px;
            /*background-color: #E5FCFB;*/
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h2 {
            background-color:black;
            color: white;
            padding: 10px;
            border-radius: 5px;
        }
        .form-group label {
            font-weight: bold;
        }

        #result {
            margin-top: 20px;
        }
        .btn-outline-info{
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="container">
    <h2 class="text-center">充值页面</h2>
    <form id="rechargeForm" class="mt-4">
        <div class="mb-3">
            <label for="money" class="form-label">充值金额：</label>
            <input type="text" class="form-control" id="money" name="money" placeholder="请输入充值金额" required>
        </div>
        <div class="text-center">

            <button type="button" class="btn btn-outline-info  col-sm-4" id="rechargeBtn">充值</button>        </div>
    </form>
    <div id="result" class="mt-4"></div>
</div>

<script>
    $(document).ready(function () {
        // 绑定充值按钮点击事件
        $('#rechargeBtn').click(function () {
            // 获取表单数据
            var money = $('#money').val();
            // 发送AJAX请求
            $.ajax({
                url: 'http://localhost:8080/userInfo/recharge', // 后端充值接口地址
                type: 'POST',
                data: {money: money},
                success: function (data) {
                    console.log(data + "处理成功");
                    // 处理返回的数据
                    $('#result').html('<div class="alert alert-success">' + data + '</div>');
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText + "处理失败");
                    // 处理错误情况
                    $('#result').html('<div class="alert alert-danger">充值失败：' + error + '</div>');
                }
            });
        });
    });
</script>

</body>
</html>
